task-detail-page {
    .task-item {
        pointer-events: none;
        padding: $item-padding;
        background-color: white;
        border-bottom: 1px solid $border-color-light;
        display: flex;
        justify-content: space-between;
        color: color($basic, text);
        white-space: nowrap;
        font-size: 1.4rem;
        position: relative;
        z-index: 1;
        >.title {
            margin-right: 1rem;
        }
        >.content {
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
    .task-item.head {
        height: 5rem;
        line-height: 5rem;
        padding: 0 1.6rem;
        .arrow {
            display: inline-block;
            border-left: .6rem solid transparent;
            border-right: .6rem solid transparent;
            border-bottom: .8rem solid color($basic, main);
            margin-right: 1rem;
            transition: all .1s linear;
            transform: rotate(90deg);
        }
    }
    .task-line {
        height: 5rem;
        overflow: hidden;
    }
    .task-line.open {
        height: auto;
        .arrow {
            transform: rotate(180deg) !important;
        }
    }
    .task-detail {
        pointer-events: none;
        padding: 0 3rem;
        font-size: 1.2rem;
        background-color: white;
        text-align: left;
        transition: all .15s ease-out;
        position: relative;
        z-index: 0;
        height: 0;
        color: transparent;
    }
    .task-detail.open {
        padding: .7rem 3rem;
        height: auto;
        border-bottom: 1px solid $border-color-light;
        color: color($basic, text-light);
    }
}